<template>
  <div class="tutorial-card bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden">
    <div v-if="tutorial.image" class="relative h-48">
      <img 
        :src="tutorial.image" 
        :alt="tutorial.title" 
        class="w-full h-full object-cover"
      >
      <div class="absolute top-2 right-2 bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded">
        {{ tutorial.level }}
      </div>
    </div>
    
    <div class="p-4">
      <div class="flex justify-between items-center mb-2">
        <span class="text-xs text-blue-600 bg-blue-50 px-2 py-1 rounded-full">{{ tutorial.category }}</span>
        <span class="text-xs text-gray-500">{{ tutorial.timeToComplete }}</span>
      </div>
      
      <h3 class="text-lg font-bold mb-2 text-gray-800 hover:text-blue-600 transition-colors duration-200">
        <router-link :to="tutorial.link">
          {{ tutorial.title }}
        </router-link>
      </h3>
      
      <p class="text-gray-600 text-sm mb-4 line-clamp-2">
        {{ tutorial.description }}
      </p>
      
      <div class="flex justify-between items-center">
        <div class="flex items-center">
          <img 
            :src="tutorial.authorAvatar" 
            alt="Author" 
            class="w-6 h-6 rounded-full mr-2"
          >
          <span class="text-xs text-gray-500">{{ tutorial.author }}</span>
        </div>
        
        <div class="flex items-center space-x-2">
          <span class="text-xs text-gray-500 flex items-center">
            <i class="fa fa-eye mr-1"></i> {{ tutorial.views }}
          </span>
          <span class="text-xs text-gray-500 flex items-center">
            <i class="fa fa-thumbs-up mr-1"></i> {{ tutorial.likes }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Html5TutorialCard',
  props: {
    tutorial: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped>
.tutorial-card {
  transition: transform 0.2s ease;
}

.tutorial-card:hover {
  transform: translateY(-2px);
}

.tutorial-card h3 a {
  text-decoration: none;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>